Mac - Hexo+GitHub轻松搭建自己的博客

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。官方文档传送门。Hexo的安装是个很快速简便的过程，但依然还是有不少坑。这里记录个我的安装过程( 这是我的Hexo+GitHub+Next+Markdown个人网站)，给大家一些参考。

整理一下安装流程：

1.hexo是基于nodejs的，需安装nodejs，安装nodejs最好选择homebrew

2.首先查看电脑是否安装ruby，因为homebrew安装依赖ruby

3.安装顺序：homebrew---->nodejs---->hexo

安装前提

需要安装 Node.js 和 Git
两个应用程序，直接到官网安装最新版本即可，如已安装请跳过。

Node.js官网
Git官网

安装Hexo

安装完Node.js 及 Git 后，即可使用npm来安装Hexo：

\$ npm install -g hexo-cli

初始化Hexo

创建一个目录用来作为你的blog目录，例如
MyBlog；并在该目录中进行Hexo的初始化：

\$ hexo init MyBlog

\$ cd ~/MyBlog/

\$ npm install

新建完成后，得到以下目录：

·

|-- _config.yml

|-- package.json

|-- scaffolds

|-- source

| |-- _drafts

| |-- _posts

|-- themes

至此，你就完成了Hexo的安装及初始化，接下来我们就可以进行本地的预览啦： \
先安装hexo server

\$ sudo npm install hexo-server

然后生成静态页面并打开hexo本地服务

\$ hexo generate (或 hexo g)

\$ hexo server

按命令行提示，打开 http:\/\/localhost:4000\/
即可看到默认主题的默认页面了。 \
可能加载会很慢，因为默认主题中使用了些Google的资源，后面更换主题就会快很多了。

安装homebrew

ruby -e \”\$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"

安装nodejs

brew install node

在安装nodejs过程中，提示如下警告：

You have Xcode 8 installed without the CLT;

根据提示进行安装

安装hexo

sudo npm install -g hexo

创建文件夹

mkdir blog
cd blog
hexo init

此时blog文件下出现了很多文件和文件夹

生成一套静态网页

hexo generate /** 生成一套静态网页 **/
hexo server /** 在服务器上运行 **/

在浏览器上运行http://localhost:4000就能看到网站首页：

撰写博客

进入终端，使用cd命令进入到有Hexo框架的目录里面，输入：

hexo new post \”我的第一篇博客\”

随后出现如下的消息：

INFO Created: ~/blog/source/_posts/我的第一篇博客.md

证明创建文章成功，”我的第一篇博客”这个md文件会创建在source/_posts/的文件下。该md文件在自动生成时会带有一些属性：

title: 定义了博文的标题

date: 定义了创作博文的时间

tags: 定义了博文的标签

除了这个三个属性以外我们还可以扩展一些属性：

update: 定义了最后修改的时间

comments：定义能否评论此博文(默认为true)

categories: 定义了博文的种类

配置文件 -- _config.yml说明

Hexo的每一个功能的配置文件都是_config.yml，具体说明看下面的注解：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site ##修改以适应搜索引擎的收录
title: Hexo ##定义网站的标题
subtitle: ##定义网站的副标题
description: ##定义网站的描述
author: jason jwl ##定义网站的负责人
language: ##定义网站的语言,默认zh-Hans
timezone: ##定义网站的时区
# URL
## If your site is put in a subdirectory, set url as \’http://yoursite.com/child\' and root as \’/child/\’
url: http://yoursite.com ##定义网站访问的域名
root: / ##定义所在Web文件夹在哪个目录
permalink: :year/:month/:day/:title/ ##定义时间格式
permalink_defaults:
# Directory
source_dir: source ##定义从哪个文件夹获取博客资料
public_dir: public ##定义生成静态网站到哪个文件夹
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/\#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 ##定义每一页多少条博客
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape ##定义使用的主题
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

注意：

另外修改这些属性时，请注意格式，属性和值要空一个格，比如theme:
landscape。

hexo的基本配置

以下是hexo配置文件 _config.yml 的基本内容及基本设置，更多个性化设置请参考官方文档：

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site ##页面信息

title: Who\’s Blog ##标题，即浏览器标签栏显示的内容

subtitle: Why so serious? ##副标题

description: ##描述，简介

author: Charles Wei ##作者

language: zh-CN ##语言

timezone: Asia/Shanghai ##时区

# URL

## If your site is put in a subdirectory, set url as
\’http://yoursite.com/child\' and root as \’/child/\’

url: http://wwww.charleswei.me
##域名，后面自定义域名后，写在这里，用
.github.io的话，这里用默认的不用改

root: /

permalink: :year/:month/:day/:title/

permalink_defaults:

# Directory ##文件目录，可不改

source_dir: source

public_dir: public

tag_dir: tags

archive_dir: archives

category_dir: categories

code_dir: downloads/code

i18n_dir: :lang

skip_render:

# Writing ##静态页面生成属性，可不改

new_post_name: :year-:month-:day-:title.md # File name of new posts

default_layout: post

titlecase: false # Transform title into titlecase

external_link: true # Open external links in new tab

filename_case: 0

render_drafts: false

post_asset_folder: false

relative_link: false

future: true

highlight:

enable: true

line_number: true

auto_detect: false

tab_replace:

# Category & Tag ##标签，可不改

default_category: uncategorized

category_map:

tag_map:

# Date / Time format ##时间格式，可不改

## Hexo uses Moment.js to parse and display date

## You can customize the date format as defined in

## http://momentjs.com/docs/\#/displaying/format/

date_format: YYYY-MM-DD

time_format: HH:mm:ss

# Pagination ##每页显示文章数，按需改

## Set per_page to 0 to disable pagination

per_page: 10

pagination_dir: page

# Extensions ##主题设置

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: indigo

# Deployment ##git部署关联

## Docs: https://hexo.io/docs/deployment.html

deploy:

type: git

repo: github:
https://github.com/glassweichao/glassweichao.github.io.git

branch: master

主题配置

Hexo具有高定制的主题效果，你可以从Hexo的主题库中选择合适的主题，也可以自己制作。 \
以我现在使用的indigo主题为例。首先将主题库clone到MyBlog目录下的themes目录：

git clone git\@github.com:yscoder/hexo-theme-indigo.git themes/indigo

安装less，主题使用less作为css预处理工具：

npm install hexo-renderer-less --save

安装feed,用于生吃RSS：

npm install hexo-generator-feed --save

安装json-content，用于生成静态站点数据，提供搜索功能的数据源：

npm install hexo-generator-json-content --save

开启标签页：

hexo new page tags

修改MyBlog/source/tags/index.md的源数据：

layout: tags

noDate: true

comments: false

---

修改hexo配置文件_config.yml中的主题标签：

theme: indigo

最后修改主题配置文件MyBlog/themes/indigo/_config.yml：

#添加新菜单项遵循以下规则

# menu:

# link: fontawesome图标，省略前缀，本主题前缀为 icon-，必须

# text: About
菜单显示的文字，如果省略即默认与图标一致，首字母会转大写

# url: /about 链接，绝对或相对路径，必须。

# target: _blank 是否跳出，省略则在当前页面打开

menu:

home:

text: 主页

url: /

archives:

url: /archives

tags:

url: /tags

github:

url: https://github.com/glassweichao

target: _blank

link:

text: 测试

url: /404

rss: /atom.xml

#你的头像,替换掉 indigo/source/img/logo.jpg 即可

urlavatar: /img/logo.jpg

# Content

tags:

title: 标签

#是否开启分享

share: true

#是否开启搜索

search: true

#是否大屏幕下文章页隐藏导航

hideMenu: true

#是否开启toc

#toc: false 关闭toc

toc:

list_number: true # 是否显示数字排序

#浏览器标签栏小图标

favicon: /favicon.ico

本地同步github

在github上new
Repository，并命名为xxxxx.github.io(xxxxx是你github的账号名)，然后把本地项目提交到github的远程项目。然后在浏览器上输入xxxxx.github.io就能访问自己的博客了。

同步到github，发现网站访问不了。经测试不是主题的问题。

个人建议不通过手动同步github，优先考虑通过修改_config.yml让hexo帮助我们同步github，方便快捷，配置如下所示：

deploy:
type: git
repo: https://github.com/xxx/xxx.github.io.git
( xxx为个人github的name)
branch: master

配置完后，运行

hexo deploy 或者 hexo d

如出现以下的错误：

ERROR Deployer not found: git

请运行以下命令进行安装：

npm install hexo-deployer-git --save

再次运行hexo deploy。工程同步成功！

与Github账户关联

首先需要去Github注册一个账号，并新建一个名为
[your_account].github.io 的仓库。 \
然后打开前面创建的MyBlog目录下的 _config.yml 文件，在修改最下方的deploy为： \
*注意，冒号后面一定要加空格

deploy:

type: git

repo: gihub:
https://github.com/\[your\_account\]/\[your\_accout\].github.io.git

branch: master

接下来安装hexo的git部署，在命令行中执行：

\$ npm install hexo-deployer-git --save

最后，将生成静态页面并部署到github的仓库中，执行：

\$ hexo d -g

或者

\$ hexo generate

\$ hexo deploy

当提示 ** INFO Deploy done: git 即上传成功，这时就可以通过
**http:\/\/[your_account].github.io 来访问你的个人站点了。 \
这里涉及了github pages的相关内容，有兴趣的可以去了解一下。

当你增加新的文章或者插件时，可以通过以下几个命令进行同步操作：

hexo clean
hexo generate (hexo g)
hexo deploy (hexo d)
hexo server (hexo s)